import type { ReactNode, MouseEvent } from 'react'
import type { NativeProps } from '../../utils/native-props'

export type ListRef = {
  nativeElement: HTMLDivElement | null
}

export type ListProps = {
  /** 列表标题. default: - */
  header?: ReactNode
  /** 列表模式，支持默认(整宽的列表)和卡片(带 margin 和圆角的卡片)两种模式. default: `default` */
  mode?: 'default' | 'card'
  /** children */
  children?: ReactNode
} & NativeProps<
  /** 点击时的背景颜色. default: --rt-border-color */
  | '--active-background-color'
  /** 列表项 align-item. default: `center` */
  | '--align-items'
  /** 容器顶部的边框样式. default: `solid 1px var(--rt-color-border)` */
  | '--border-top'
  /** 容器底部的边框样式. default: `solid 1px var(--rt-color-border)` */
  | '--border-bottom'
  /** 列表项顶部的边框样式. default: `solid 1px var(--rt-color-border)` */
  | '--border-inner'
  /** extra 部分的最大宽度. default: `70%` */
  | '--extra-max-width'
  /** Body 内容的字体大小. default: `14px` */
  | '--font-size'
  /** 头部的字体大小. default: `16px` */
  | '--header-font-size'
  /** 列表项`title及description`字体大小. default: `12px` */
  | '--font-title-des-size'
  /** 列表项和列表头左侧的 padding. default: `12px`  */
  | '--padding-left'
  /** 列表项和列表头右侧的 padding. default: `12px` */
  | '--padding-right'
  /** prefix 部分的右侧 padding. default: `12px` */
  | '--prefix-padding-right'
  /** prefix 部分的宽度. default: `auto` */
  | '--prefix-width'
  /** prefix 部分的颜色. default: `--rt-color-text-secondary` */
  | '--prefix-color'
>

export type ListItemProps = {
  /** 右侧是否显示箭头图标 支持自定义图标. default: -. 与 `clickable` 的值保持一致 */
  arrow?: boolean | ReactNode
  /** 是否显示点击效果. default: -. 当 onClick 属性存在时，默认为 `true`，否则默认为 `false` */
  clickable?: boolean
  /** 是否禁用. default: `false` */
  disabled?: boolean
  /** 列表项中间下部的描述区域. default: - */
  description?: ReactNode
  /** 列表项右侧区域. default: - */
  extra?: ReactNode
  /** 列表项的点击事件，当设置了 onClick 属性时，列表项会有点击效果. default: - */
  onClick?: (e: MouseEvent<HTMLElement>) => void
  /** 列表项左侧区域. default: - */
  prefix?: ReactNode
  /** 列表项中间上部的标题区域. default: - */
  title?: ReactNode
  /** children */
  children?: ReactNode
} & NativeProps<
  /** 列表项的 align-item. default: `center` */
  | '--align-items'
  /** 点击时的背景颜色. default: `--rt-border-color` */
  | '--active-background-color'
  /** 列表项`title及description`字体大小. default: `12px` */
  | '--font-title-des-size'
  /** prefix 部分的宽度. default: `auto` */
  | '--prefix-width'
  /** prefix 部分的颜色. default: `--rt-color-text-secondary` */
  | '--prefix-color'
>
